<template>
     <li class="classification-card" >
       <div class="classification-left">
         <p class="text">{{classificationCards.text}}</p>
         <p class="desc">{{classificationCards.desc}}</p>
       </div>
       <div class="classification-right">
         <font-awesome-icon :icon="classificationCards.cardType"></font-awesome-icon>
       </div>
     </li>
</template>

<script>
export default {
  name: 'classificationCard',
  props: ['classificationCards']
}
</script>

<style scoped lang="less">
  .classification-card{
    width: 100%;
    flex: 1;
    border-radius: 10px;
    background-color: #ccc;
    float: left;
    margin: 10px;
    padding: 10px;
    .classification-left{
      width: 50%;
      float: left;
      .text{
        font-size: 24px;
        color: #000;
        font-weight: 700;
      }
      .desc{
        font-size: 16px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 80%;
      }
    }
    .classification-right{
      width: 50%;
      font-size: 16px;
      float: right;
      text-align: center;
      svg{
        font-size: 50px;
        color: orange;
        padding-top: 10px;
      }
    }
  }
</style>
